<template>
    <div>
        <el-container>
            <el-header class="inside-header">
                <div>
                    <!-- 面包屑 -->
                    <el-breadcrumb separator=">">
                        <el-breadcrumb-item>企业环保</el-breadcrumb-item>
                        <el-breadcrumb-item>企业文件</el-breadcrumb-item>
                        <el-breadcrumb-item class="breadcrumbColor">企业环保信息</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
            </el-header>
            <el-main style="margin-top: -40px;">
                <el-form style="background: white;padding: 20px;" :model="form" label-width="120px">
                    <!-- 横条 项目环评报批及验收材料 -->
                    <div class="head-bar">
                        <div class="head-bar-main"></div>
                        <div>
                            <h4>项目环评报批及验收材料</h4>
                        </div>
                    </div>
                    <table cellspacing="0">
                        <tr>
                            <td class="a">序号</td>
                            <td class="b">名称</td>
                            <td>文件管理</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>营业执照</td>
                            <td>
                              <el-upload
                                   ref="covers" style="margin-top:10px;float:left;width:60%"
                                  :file-list="formData.photolist"
                                  action="#" :limit="1"
                                  accept="image/png,image/jpg,image/jpeg"
                                  :http-request="upload">
                                <el-button type="primary" icon="upload" @click="indexs.upload=1" style="float:right">营业执照上传</el-button>
                              </el-upload>
                              <el-button type="primary" style="margin-top:10px;float:left" icon="view" @click="lookup(0)">查看</el-button>
                              <el-button type="danger" style="margin-top:10px;float:left" icon="delete" @click="deleteFile(0)">删除</el-button>
                            </td>
                        </tr>
                        <tr>
                            <td rowspan="3">2</td>
                            <td rowspan="3">环境影响评价报告书</td>
                            <td>
                              <el-button type="text" icon="View"></el-button>
                              <el-button type="text" icon="Delete"></el-button>
                            </td>
                        </tr>
                        <tr>
                            <td>
                              <el-upload
                                  ref="covers" style="margin-top:10px;float:left;width:60%"
                                  :file-list="formData.photolist"
                                  action="#" :limit="1"
                                  accept=".doc,.docx,.xls,.xlsx"
                                  :http-request="upload">
                                <el-button type="primary" icon="upload" @click="indexs.upload=2" style="float:right">备案上传</el-button>
                              </el-upload>
                              <a :href="formData.urlList[1].url" download><el-button type="primary" style="margin-top:10px;float:left" icon="download">下载</el-button></a>
                              <el-button type="danger" style="margin:10px;float:left" icon="delete" @click="deleteFile(1)">删除</el-button>
                            </td>
                        </tr>
                        <tr>
                            <td>
                              <el-upload
                                  ref="covers" style="margin-top:10px;float:left;width:60%"
                                  :file-list="formData.photolist"
                                  action="#" :limit="1"
                                  accept=".doc,.docx,.xls,.xlsx"
                                  :http-request="upload">
                                <el-button type="primary" icon="upload" @click="indexs.upload=3" style="float:right">全本上传</el-button>
                              </el-upload>
                              <a :href="formData.urlList[2].url" download><el-button type="primary" style="margin-top:10px;float:left" icon="download">下载</el-button></a>
                              <el-button type="danger" style="margin:10px;float:left" icon="delete" @click="deleteFile(2)">删除</el-button>
                            </td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>登记表网上备案文件</td>
                            <td>
                              <el-upload
                                  ref="covers" style="margin-top:10px;float:left;width:60%"
                                  :file-list="formData.photolist"
                                  action="#" :limit="1"
                                  accept=".doc,.docx,.xls,.xlsx"
                                  :http-request="upload">
                                <el-button type="primary" icon="upload" @click="indexs.upload=4" style="float:right">全本上传</el-button>
                              </el-upload>
                              <a :href="formData.urlList[3].url" download><el-button type="primary" style="margin-top:10px;float:left" icon="download">下载</el-button></a>
                              <el-button type="danger" style="margin:10px;float:left" icon="delete" @click="deleteFile(3)">删除</el-button>
                            </td>
                        </tr>
                        <tr>
                            <td rowspan="3">4</td>
                            <td rowspan="3">环境保护设施验收</td>
                            <td>
                              <el-upload
                                  ref="covers" style="margin-top:10px;float:left;width:60%"
                                  :file-list="formData.photolist"
                                  action="#" :limit="1"
                                  accept=".doc,.docx,.xls,.xlsx"
                                  :http-request="upload">
                                <el-button type="primary" icon="upload" @click="indexs.upload=5" style="float:right">批复上传</el-button>
                              </el-upload>
                              <a :href="formData.urlList[4].url" download><el-button type="primary" style="margin-top:10px;float:left" icon="download">下载</el-button></a>
                              <el-button type="danger" style="margin:10px;float:left" icon="delete" @click="deleteFile(4)">删除</el-button>
                            </td>
                        </tr>
                        <tr>
                            <td>
                              <el-upload
                                  ref="covers" style="margin-top:10px;float:left;width:60%"
                                  :file-list="formData.photolist"
                                  action="#" :limit="1"
                                  accept=".doc,.docx,.xls,.xlsx"
                                  :http-request="upload">
                                <el-button type="primary" icon="upload" @click="indexs.upload=6" style="float:right">备案上传</el-button>
                              </el-upload>
                              <a :href="formData.urlList[5].url" download><el-button type="primary" style="margin-top:10px;float:left" icon="download">下载</el-button></a>
                              <el-button type="danger" style="margin:10px;float:left" icon="delete" @click="deleteFile(5)">删除</el-button>
                            </td>
                        </tr>
                        <tr>
                            <td>
                              <el-upload
                                  ref="covers" style="margin-top:10px;float:left;width:60%"
                                  :file-list="formData.photolist"
                                  action="#" :limit="1"
                                  accept=".doc,.docx,.xls,.xlsx"
                                  :http-request="upload">
                                <el-button type="primary" icon="upload" @click="indexs.upload=7" style="float:right">全本上传</el-button>
                              </el-upload>
                              <a :href="formData.urlList[6].url" download><el-button type="primary" style="margin-top:10px;float:left" icon="download">下载</el-button></a>
                              <el-button type="danger" style="margin:10px;float:left" icon="delete" @click="deleteFile(6)">删除</el-button>
                            </td>
                        </tr>
                    </table>
                    <!-- 横条 排污许可证 -->
                    <div class="head-bar">
                        <div class="head-bar-main"></div>
                        <div>
                            <h4>排污许可证</h4>
                        </div>
                    </div>
                    <table cellspacing="0">
                        <tr>
                            <td class="a">序号</td>
                            <td class="b">名称</td>
                            <td>文件管理</td>
                        </tr>
                        <tr>
                            <td rowspan="3">1</td>
                            <td rowspan="3">排污许可证</td>
                            <td>
                              <el-upload
                                  ref="covers" style="margin-top:10px;float:left;width:60%"
                                  :file-list="formData.photolist"
                                  action="#" :limit="1"
                                  accept="image/png,image/jpg,image/jpeg"
                                  :http-request="upload">
                                <el-button type="primary" icon="upload" @click="indexs.upload=8" style="float:right">正本上传</el-button>
                              </el-upload>
                              <el-button type="primary" style="margin-top:10px;float:left" icon="view" @click="lookup(7)">查看</el-button>
                              <el-button type="danger" style="margin:10px;float:left" icon="delete" @click="deleteFile(7)">删除</el-button>
                            </td>
                        </tr>
                        <tr>
                            <td>
                              <el-upload
                                  ref="covers" style="margin-top:10px;float:left;width:60%"
                                  :file-list="formData.photolist"
                                  action="#" :limit="1"
                                  accept="image/png,image/jpg,image/jpeg"
                                  :http-request="upload">
                                <el-button type="primary" icon="upload" @click="indexs.upload=9" style="float:right">副本上传</el-button>
                              </el-upload>
                              <el-button type="primary" style="margin-top:10px;float:left" icon="view" @click="lookup(8)">查看</el-button>
                              <el-button type="danger" style="margin:10px;float:left" icon="delete" @click="deleteFile(8)">删除</el-button>
                            </td>
                        </tr>
                    </table>
                    <!-- 横条 污染治理设施运行台账 -->
                    <div class="head-bar">
                        <div class="head-bar-main"></div>
                        <div>
                            <h4>污染治理设施运行台账</h4>
                        </div>
                    </div>
                    <table cellspacing="0">
                        <tr>
                            <td class="a">序号</td>
                            <td class="b">名称</td>
                            <td>文件管理</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>废水</td>
                            <td>
                              <el-upload
                                  ref="covers" style="margin-top:10px;float:left;width:60%"
                                  :file-list="formData.photolist"
                                  action="#" :limit="1"
                                  accept="image/png,image/jpg,image/jpeg"
                                  :http-request="upload">
                                <el-button type="primary" icon="upload" @click="indexs.upload=10" style="float:right">文件上传</el-button>
                              </el-upload>
                              <el-button type="primary" style="margin-top:10px;float:left" icon="view" @click="lookup(9)">查看</el-button>
                              <el-button type="danger" style="margin:10px;float:left" icon="delete" @click="deleteFile(9)">删除</el-button>
                            </td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>废气</td>
                            <td>
                              <el-upload
                                  ref="covers" style="margin-top:10px;float:left;width:60%"
                                  :file-list="formData.photolist"
                                  action="#" :limit="1"
                                  accept="image/png,image/jpg,image/jpeg"
                                  :http-request="upload">
                                <el-button type="primary" icon="upload" @click="indexs.upload=11" style="float:right">文件上传</el-button>
                              </el-upload>
                              <el-button type="primary" style="margin-top:10px;float:left" icon="view" @click="lookup(10)">查看</el-button>
                              <el-button type="danger" style="margin:10px;float:left" icon="delete" @click="deleteFile(10)">删除</el-button>
                            </td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>维护</td>
                            <td>
                                <el-button type="primary">维护记录</el-button>
                                <el-button type="primary" @click="maintain = true">添加记录</el-button>
                            </td>
                        </tr>

                        <tr>
                            <td>4</td>
                            <td>加药</td>
                            <td>
                                <el-button type="primary">加药记录</el-button>
                                <el-button type="primary" @click="dosing = true">添加记录</el-button>
                            </td>
                        </tr>
                        <tr>
                            <td>5</td>
                            <td>活性炭</td>
                            <td>
                                <el-button type="primary">活性炭记录</el-button>
                                <el-button type="primary">添加记录</el-button>
                            </td>
                        </tr>
                        <tr>
                            <td>6</td>
                            <td>安装</td>
                            <td>
                              <el-upload
                                  ref="covers" style="margin-top:10px;float:left;width:60%"
                                  :file-list="formData.photolist"
                                  action="#" :limit="1"
                                  accept="image/png,image/jpg,image/jpeg"
                                  :http-request="upload">
                                <el-button type="primary" icon="upload" @click="indexs.upload=12" style="float:right">文件上传</el-button>
                              </el-upload>
                              <el-button type="primary" style="margin-top:10px;float:left" icon="view" @click="lookup(11)">查看</el-button>
                              <el-button type="danger" style="margin:10px;float:left" icon="delete" @click="deleteFile(11)">删除</el-button>
                            </td>
                        </tr>
                        <tr>
                            <td>7</td>
                            <td>验收</td>
                            <td>
                              <el-upload
                                  ref="covers" style="margin-top:10px;float:left;width:60%"
                                  :file-list="formData.photolist"
                                  action="#" :limit="1"
                                  accept="image/png,image/jpg,image/jpeg"
                                  :http-request="upload">
                                <el-button type="primary" icon="upload" @click="indexs.upload=13" style="float:right">文件上传</el-button>
                              </el-upload>
                              <el-button type="primary" style="margin-top:10px;float:left" icon="view" @click="lookup(12)">查看</el-button>
                              <el-button type="danger" style="margin:10px;float:left" icon="delete" @click="deleteFile(12)">删除</el-button>
                            </td>
                        </tr>
                        <tr>
                            <td>8</td>
                            <td>使用</td>
                            <td>
                              <el-upload
                                  ref="covers" style="margin-top:10px;float:left;width:60%"
                                  :file-list="formData.photolist"
                                  action="#" :limit="1"
                                  accept="image/png,image/jpg,image/jpeg"
                                  :http-request="upload">
                                <el-button type="primary" icon="upload" @click="indexs.upload=14" style="float:right">文件上传</el-button>
                              </el-upload>
                              <el-button type="primary" style="margin-top:10px;float:left" icon="view" @click="lookup(13)">查看</el-button>
                              <el-button type="danger" style="margin:10px;float:left" icon="delete" @click="deleteFile(13)">删除</el-button>
                            </td>
                        </tr>
                    </table>
                    <!-- 横条 排污口分布及污染物检测台账 -->
                    <div class="head-bar">
                        <div class="head-bar-main"></div>
                        <div>
                            <h4>排污口分布及污染物检测台账</h4>
                        </div>
                    </div>
                    <table cellspacing="0">
                        <tr>
                            <td class="a">序号</td>
                            <td class="b">名称</td>
                            <td>文件管理</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>设置情况</td>
                            <td>
                              <el-upload
                                  ref="covers" style="margin-top:10px;float:left;width:60%"
                                  :file-list="formData.photolist"
                                  action="#" :limit="1"
                                  accept="image/png,image/jpg,image/jpeg"
                                  :http-request="upload">
                                <el-button type="primary" icon="upload" @click="indexs.upload=15" style="float:right">文件上传</el-button>
                              </el-upload>
                              <el-button type="primary" style="margin-top:10px;float:left" icon="view" @click="lookup(14)">查看</el-button>
                              <el-button type="danger" style="margin:10px;float:left" icon="delete" @click="deleteFile(14)">删除</el-button>
                            </td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>分布图</td>
                            <td>
                              <el-upload
                                  ref="covers" style="margin-top:10px;float:left;width:60%"
                                  :file-list="formData.photolist"
                                  action="#" :limit="1"
                                  accept="image/png,image/jpg,image/jpeg"
                                  :http-request="upload">
                                <el-button type="primary" icon="upload" @click="indexs.upload=16" style="float:right">文件上传</el-button>
                              </el-upload>
                              <el-button type="primary" style="margin-top:10px;float:left" icon="view" @click="lookup(15)">查看</el-button>
                              <el-button type="danger" style="margin:10px;float:left" icon="delete" @click="deleteFile(15)">删除</el-button>
                            </td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>标志照片</td>
                            <td>
                              <el-upload
                                  ref="covers" style="margin-top:10px;float:left;width:60%"
                                  :file-list="formData.photolist"
                                  action="#" :limit="1"
                                  accept="image/png,image/jpg,image/jpeg"
                                  :http-request="upload">
                                <el-button type="primary" icon="upload" @click="indexs.upload=17" style="float:right">文件上传</el-button>
                              </el-upload>
                              <el-button type="primary" style="margin-top:10px;float:left" icon="view" @click="lookup(16)">查看</el-button>
                              <el-button type="danger" style="margin:10px;float:left" icon="delete" @click="deleteFile(16)">删除</el-button>
                            </td>
                        </tr>
                        <tr>
                            <td>4</td>
                            <td>监测计划</td>
                            <td>
                              <el-upload
                                  ref="covers" style="margin-top:10px;float:left;width:60%"
                                  :file-list="formData.photolist"
                                  action="#" :limit="1"
                                  accept="image/png,image/jpg,image/jpeg"
                                  :http-request="upload">
                                <el-button type="primary" icon="upload" @click="indexs.upload=18" style="float:right">文件上传</el-button>
                              </el-upload>
                              <el-button type="primary" style="margin-top:10px;float:left" icon="view" @click="lookup(17)">查看</el-button>
                              <el-button type="danger" style="margin:10px;float:left" icon="delete" @click="deleteFile(17)">删除</el-button>
                            </td>
                        </tr>
                        <tr>
                            <td>5</td>
                            <td>监测报告</td>
                            <td>
                              <el-upload
                                  ref="covers" style="margin-top:10px;float:left;width:60%"
                                  :file-list="formData.photolist"
                                  action="#" :limit="1"
                                  accept="image/png,image/jpg,image/jpeg"
                                  :http-request="upload">
                                <el-button type="primary" icon="upload" @click="indexs.upload=19" style="float:right">文件上传</el-button>
                              </el-upload>
                              <el-button type="primary" style="margin-top:10px;float:left" icon="view" @click="lookup(18)">查看</el-button>
                              <el-button type="danger" style="margin:10px;float:left" icon="delete" @click="deleteFile(18)">删除</el-button>
                            </td>
                        </tr>
                        <tr>
                            <td>6</td>
                            <td>监测公开</td>
                            <td>
                              <el-upload
                                  ref="covers" style="margin-top:10px;float:left;width:60%"
                                  :file-list="formData.photolist"
                                  action="#" :limit="1"
                                  accept="image/png,image/jpg,image/jpeg"
                                  :http-request="upload">
                                <el-button type="primary" icon="upload" @click="indexs.upload=20" style="float:right">文件上传</el-button>
                              </el-upload>
                              <el-button type="primary" style="margin-top:10px;float:left" icon="view" @click="lookup(19)">查看</el-button>
                              <el-button type="danger" style="margin:10px;float:left" icon="delete" @click="deleteFile(19)">删除</el-button>
                            </td>
                        </tr>
                    </table>
                    <div style="display:flex;justify-content: center;margin: 18px 0 80px 0;">
                        <el-button class="sele-but" @click='close()'>保存</el-button>
                    </div>
                </el-form>

            </el-main>
        </el-container>
        <!-- 维护新增弹窗 -->
        <div>
            <el-dialog v-model="maintain" title="添加维护记录" width="30%">
                <div style="width: 90%;">
                    <el-form :model="form" label-width="120px">
                        <el-form-item label="时间">
                            <el-date-picker v-model="form.date1" type="date" placeholder="请选择" />
                        </el-form-item>
                        <el-form-item label="维护内容">
                            <el-input v-model="form.desc" type="textarea" />
                        </el-form-item>
                        <el-form-item label="维护人">
                            <el-input v-model="form.name" />
                        </el-form-item>
                    </el-form>
                </div>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button type="primary" @click="maintain = false">
                            确定
                        </el-button>
                        <el-button @click="maintain = false">取消</el-button>
                    </span>
                </template>
</el-dialog>
</div>
<!-- 加药新增弹窗 -->
<div>
    <el-dialog v-model="dosing" title="添加维护记录" width="30%">
        <div style="width: 90%;">
            <el-form :model="formDosing" label-width="120px">
                <el-form-item label="时间">
                    <el-date-picker v-model="formDosing.date1" type="date" placeholder="请选择" />
                </el-form-item>
                <el-form-item label="加药内容">
                    <el-input v-model="formDosing.desc" type="textarea" />
                </el-form-item>
                <el-form-item label="加药人">
                    <el-input v-model="formDosing.name" />
                </el-form-item>
                <el-form-item label="企业确认人">
                    <el-input v-model="formDosing.confirm" />
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
                    <span class="dialog-footer">
                        <el-button type="primary" @click="dosing = false">
                            确定
                        </el-button>
                        <el-button @click="dosing = false">取消</el-button>
                    </span>
                </template>
    </el-dialog>
</div>
      <el-dialog v-model="lookable" title="查看" width="30%" @close="lookable=false">
        <div style="width: 100%;text-align:center">
            <el-image :src="formData.urlList[indexs.look].url" :preview-src-list="[formData.urlList[indexs.look].url]"/>
        </div>
      </el-dialog>
</div>
</template>

<script setup lang="ts">
    import {onMounted, reactive, ref} from 'vue'
    import {ElMessage,ElMessageBox,ElLoading } from 'element-plus'
    import {allUrl,uploads,updateFile} from "@/api/upload";
    // form维护新增表单
    const form = reactive({
            name: '',
            date1: '',
            desc: '',
        })
    let indexs = reactive({upload:0,look:0});
    let lookable = ref(false);
    let formData = reactive({
        urlList:[{url:""},{url:""},{url:""},{url:""},{url:""},{url:""},{url:""},{url:""},{url:""},{url:""},{url:""},{url:""},{url:""},
          {url:""},{url:""},{url:""},{url:""},{url:""},{url:""},{url:""},{url:""}],
        filelist:[],
        photolist:[]
    });
    const lookup = (index) =>{
      if(formData.urlList[index].url.length>0){
        indexs.look = index;
        lookable.value = true;
      }else{
        ElMessage.warning("文件还未上传.")
      }
    }
    const deleteFile = (index) =>{
      if(formData.urlList[index].url.length>0){
        updateFile({id:index+1}).then(res=>{
          formData.urlList[index].url = "";
          ElMessage.success("文件已删除.")
        })
      }else{
        ElMessage.warning("文件还未上传.")
      }
    }
    let covers = ref();
    const upload = (file:any, fileList:any) =>{
      let loadingInstance:any = null;
      let size = file.file.size/1024;
      if(size>1024){
        covers.value.clearFiles();
        ElMessage({
          message: "can not more than 1M",
          type: "warning",
        });
        }else{
          let form = new FormData();
          form.append("file",file.file);
          form.append("id",indexs.upload);
          loadingInstance = ElLoading.service({
            lock: true,
            text: "uploading……",
            background: 'rgba(0, 0, 0, 0.1)'
          });
          uploads(form).then(res=>{
            formData.urlList[indexs.upload-1].url = res;
            loadingInstance.close();
            covers.value.clearFiles();
            ElMessage.success('上传成功!')
          })
        }
      };

    // 维护新增弹窗
    const maintain = ref(false)
        // 加药新增弹窗
    const dosing = ref(false)
    // form加药新增表单
    const formDosing = reactive({
        name: '',
        date1: '',
        desc: '',
      confirm: '',
    })
    const close = () => {
        ElMessage.success('保存成功!')
      }
    onMounted(() => {
      allUrl().then(res=>{
        formData.urlList = res.data;
      })
    });
</script>
<style scoped>
    table {
        width: 80%;
        padding: 10px;
        /* border: 1px solid rgb(0, 0, 0); */
    }

    tr {
        padding: 10px;
        list-style: none;
        height: 40px;
        text-align: center;
    }

    td {
        border: 1px solid black;
    }

    .a {
        width: 130px;
    }

    .b {
        width: 200px;
    }

    .c {
        width: 600px;
    }
    /* 面包屑字体颜色更改 */
    .breadcrumbColor>>>.el-breadcrumb__inner {
        color: #000;
    }
    /* 横条蓝条样式 */
    .head-bar {
        width: 100%;
        height: 40px;
        margin-top: 5px;
        display: flex;
    }

    .head-bar-main {
        width: 3px;
        height: 20px;
        opacity: 1;
        margin-top: 5px;
        background: #3780B9;
        margin-right: 11px;
    }
    /* 文件上传文字样式 */
    .UPtsxt {
        width: 120px;
        height: 30px;
    }
    /* 文件上传样式 */
    .avatar-uploader {
        width: 120px;
        height: 120px;
        background-color: #E5F4FF;
    }
    .el-icon.avatar-uploader-icon {
        font-size: 28px;
        color: #3780B9;
        width: 120px;
        height: 120px;
        text-align: center;
    }
    /* 空心按钮样式 */
    .empty-but {
        border: 1px solid #3780b9;
        color: #3780b9;
    }
    /* 实心按钮背景样式 */
    .sele-but {
        background: #3780b9;
        border: 0px;
        border-radius: 2px;
        color: white;
    }
</style>
